<template>
  <div class="chat-window">
    <div v-for="(msg, i) in messages" :key="i" :class="['msg-container', msg.sender === 'user' ? 'msg-user' : 'msg-bot']">
      <div class="msg-bubble" :class="{ 'thinking': msg.isThinking }">{{ msg.text }}
        <img v-if="msg.image" :src="msg.image" class="message-image" alt="用户上传的图片">
        <div v-if="msg.isThinking" class="typing-indicator">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChatWindow',
  props: ['messages']
}
</script>

<style scoped>
.chat-window { height: 500px; overflow-y: auto; background: #fff; border-radius: 12px; padding: 16px; margin: 0 auto 20px; max-width: 800px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.msg-container { display: flex; margin-bottom: 12px; }
.msg-user { justify-content: flex-end; }
.msg-bot { justify-content: flex-start; }
.msg-bubble { max-width: 70%; padding: 12px 16px; border-radius: 18px; position: relative; font-size: 15px; line-height: 1.6; }
.msg-user .msg-bubble { background: #2d8cf0; color: white; border-bottom-right-radius: 4px; font-weight: 400; }
.msg-bot .msg-bubble { background: #f0f0f0; color: #333; border-bottom-left-radius: 4px; font-weight: 400; }
.message-image { max-width: 100%; max-height: 200px; margin-top: 8px; border-radius: 8px; }

/* 正在思考状态样式 */
.typing-indicator { display: flex; gap: 4px; margin-top: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background-color: #999; animation: pulse 1.4s infinite ease-in-out both; }
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes pulse { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
/* .thinking .msg-text { opacity: 0; } */
.thinking { min-height: 40px; display: flex; flex-direction: column; justify-content: center; }
</style>